ranklist=document.querySelector('.ranklist')
const rankTabs = document.querySelectorAll('.dd');

// 为每个榜单创建一个数组来存储数据
const rankData = {
    integral: [], // 积分榜
    monthly: [],  // 月票榜
    reward: [],   // 打赏榜
    sales: [],    // 销量榜
    subscription: [], // 订阅榜
    starlight: [], // 星光榜
    newbook: [],  // 新书榜
    rich: []      // 土豪榜
};

// 当前显示的榜单，默认为积分榜
let currentRank = 'integral';

// 标记数据是否已加载完成
let dataLoaded = {
    integral: false,
    monthly: false,
    reward: false,
    sales: false,
    subscription: false,
    starlight: false,
    newbook: false,
    rich: false
};

// 渲染积分榜
axios.get('https://www.iceread.com/api/common/rank/6276/0/10?cb=1757177551370',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    rankData.integral = res.data.list || [];
    dataLoaded.integral = true;
    if (currentRank === 'integral') {
        renderRankList(rankData.integral);
    }
}).catch(err=> {
    console.error('获取积分榜数据失败:', err);
    dataLoaded.integral = true; // 标记为已加载，即使失败
})

//渲染月票榜
axios.get('https://www.iceread.com/api/common/rank/6264/3/10?cb=1757177551371',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    rankData.monthly = res.data.list || [];
    dataLoaded.monthly = true;
    if (currentRank === 'monthly') {
        renderRankList(rankData.monthly);
    }
}).catch(err=> {
    console.error('获取月票榜数据失败:', err);
    dataLoaded.monthly = true; // 标记为已加载，即使失败
})

//渲染打赏榜
axios.get('https://www.iceread.com/api/common/rank/6273/0/16',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    // 截取第11到16条数据（索引10-15）
    rankData.reward = (res.data.list || []).slice(10, 16);
    dataLoaded.reward = true;
    if (currentRank === 'reward') {
        renderRankList(rankData.reward);
    }
}).catch(err=> {
    console.error('获取打赏榜数据失败:', err);
    dataLoaded.reward = true; // 标记为已加载，即使失败
})

//渲染销量榜
axios.get('https://www.iceread.com/api/common/rank/6267/0/20',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    // 截取第16到20条数据（索引15-19）
    rankData.sales = (res.data.list || []).slice(15, 20);
    dataLoaded.sales = true;
    if (currentRank === 'sales') {
        renderRankList(rankData.sales);
    }
}).catch(err=> {
    console.error('获取销量榜数据失败:', err);
    dataLoaded.sales = true; // 标记为已加载，即使失败
})

//渲染订阅榜
axios.get('https://www.iceread.com/api/common/rank/6273/0/10?cb=1757177551374',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    rankData.subscription = res.data.list || [];
    dataLoaded.subscription = true;
    if (currentRank === 'subscription') {
        renderRankList(rankData.subscription);
    }
}).catch(err=> {
    console.error('获取订阅榜数据失败:', err);
    dataLoaded.subscription = true; // 标记为已加载，即使失败
})

//渲染新书榜
axios.get('https://www.iceread.com/api/common/rank/6267/0/30',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    // 截取第20到30条数据（索引19-29）
    rankData.newbook = (res.data.list || []).slice(19, 30);
    dataLoaded.newbook = true;
    if (currentRank === 'newbook') {
        renderRankList(rankData.newbook);
    }
}).catch(err=> {
    console.error('获取新书榜数据失败:', err);
    dataLoaded.newbook = true; // 标记为已加载，即使失败
})

//渲染星光榜
axios.get('https://www.iceread.com/api/common/rank/6267/0/40',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    // 截取第30到40条数据（索引29-39）
    rankData.starlight = (res.data.list || []).slice(29, 40);
    dataLoaded.starlight = true;
    if (currentRank === 'starlight') {
        renderRankList(rankData.starlight);
    }
}).catch(err=> {
    console.error('获取星光榜数据失败:', err);
    dataLoaded.starlight = true; // 标记为已加载，即使失败
})

//渲染土豪榜
axios.get('https://www.iceread.com/api/common/rank/6267/0/50',{
    params: {
        // 参数名: 参数值
    }
}).then(res=> {
    console.log(res.data.list);
    // 截取第40到50条数据（索引39-49）
    rankData.rich = (res.data.list || []).slice(39, 50);
    dataLoaded.rich = true;
    if (currentRank === 'rich') {
        renderRankList(rankData.rich);
    }
}).catch(err=> {
    console.error('获取土豪榜数据失败:', err);
    dataLoaded.rich = true; // 标记为已加载，即使失败
})

// 渲染榜单列表的函数
function renderRankList(list) {
    if (!list || !Array.isArray(list)) {
        console.warn('尝试渲染非数组数据:', list);
        return;
    }
    
    ranklist.innerHTML = '';
    list.forEach((item, index) => {  
        let numClass = '';
        let showNumber = false; // 控制是否显示排名
        
        // 只有前三名显示排名背景图
        if (index === 0) {
            numClass = 'num';
            showNumber = true;
        } else if (index === 1) {
            numClass = 'num2';
            showNumber = true;
        } else if (index === 2) {
            numClass = 'num3';
            showNumber = true;
        }
        
        // 构建HTML内容
        let numberHtml = '';
        if (showNumber) {
            // 只显示背景图，不显示数字
            numberHtml = `<div class="${numClass}"></div>`;
        }
        
        ranklist.innerHTML += `
            <li class="rankitem">
                <div class="leftimg">
                    <img src="${item.story?.cover || ''}" alt="">
                    ${numberHtml}
                </div>
                <div class="rightrank">
                    <div class="alltop">
                        <div class="title">
                            <h4>
                                ${item.story?.name || '未知作品'}
                                <em>连载中</em>
                            </h4>
                            <div class="titleright">
                                <b>${item.story?.score || '2029.7万'}</b>
                                ${getScoreLabel()}
                            </div>
                        </div>
                        <div class="author">
                            <i class="cover"></i>
                            <span>${item.story?.author || '未知作者'}</span>
                            |
                            <span>${item.story?.category || '现代言情'}</span>
                        </div>
                        <p>${item.story?.introduce || '暂无简介'}</p>
                    </div>
                    <div class="tag">
                        ${(item.story?.tags || ['女强', '现代', '言情']).map(tag => `<span>${tag}</span>`).join('')}
                    </div>
                </div>
            </li>
        `
    });
}

// 根据当前榜单类型返回对应的标签
function getScoreLabel() {
    if (currentRank === 'integral') {
        return '积分';
    } else if (currentRank === 'monthly') {
        return '月票';
    } else if (currentRank === 'reward') {
        return '打赏';
    } else if (currentRank === 'sales') {
        return '销量';
    } else if (currentRank === 'newbook') {
        return '新书';
    } else if (currentRank === 'starlight') {
        return '星光';
    } else if (currentRank === 'subscription') {
        return '订阅';
    } else if (currentRank === 'rich') {
        return '土豪';
    } else {
        return '积分';
    }
}

// 切换榜单的函数
function switchRank(rankType) {
    currentRank = rankType;
    
    // 检查数据是否已加载
    if (rankType === 'integral') {
        if (dataLoaded.integral && rankData.integral && Array.isArray(rankData.integral)) {
            renderRankList(rankData.integral);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.integral && rankData.integral && Array.isArray(rankData.integral)) {
                    renderRankList(rankData.integral);
                }
            }, 100);
        }
    } else if (rankType === 'monthly') {
        if (dataLoaded.monthly && rankData.monthly && Array.isArray(rankData.monthly)) {
            renderRankList(rankData.monthly);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.monthly && rankData.monthly && Array.isArray(rankData.monthly)) {
                    renderRankList(rankData.monthly);
                }
            }, 100);
        }
    } else if (rankType === 'reward') {
        if (dataLoaded.reward && rankData.reward && Array.isArray(rankData.reward)) {
            renderRankList(rankData.reward);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.reward && rankData.reward && Array.isArray(rankData.reward)) {
                    renderRankList(rankData.reward);
                }
            }, 100);
        }
    } else if (rankType === 'sales') {
        if (dataLoaded.sales && rankData.sales && Array.isArray(rankData.sales)) {
            renderRankList(rankData.sales);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.sales && rankData.sales && Array.isArray(rankData.sales)) {
                    renderRankList(rankData.sales);
                }
            }, 100);
        }
    } else if (rankType === 'newbook') {
        if (dataLoaded.newbook && rankData.newbook && Array.isArray(rankData.newbook)) {
            renderRankList(rankData.newbook);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.newbook && rankData.newbook && Array.isArray(rankData.newbook)) {
                    renderRankList(rankData.newbook);
                }
            }, 100);
        }
    } else if (rankType === 'starlight') {
        if (dataLoaded.starlight && rankData.starlight && Array.isArray(rankData.starlight)) {
            renderRankList(rankData.starlight);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.starlight && rankData.starlight && Array.isArray(rankData.starlight)) {
                    renderRankList(rankData.starlight);
                }
            }, 100);
        }
    } else if (rankType === 'subscription') {
        if (dataLoaded.subscription && rankData.subscription && Array.isArray(rankData.subscription)) {
            renderRankList(rankData.subscription);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.subscription && rankData.subscription && Array.isArray(rankData.subscription)) {
                    renderRankList(rankData.subscription);
                }
            }, 100);
        }
    } else if (rankType === 'rich') {
        if (dataLoaded.rich && rankData.rich && Array.isArray(rankData.rich)) {
            renderRankList(rankData.rich);
        } else {
            // 如果数据还未加载，等待一段时间后重试
            setTimeout(() => {
                if (dataLoaded.rich && rankData.rich && Array.isArray(rankData.rich)) {
                    renderRankList(rankData.rich);
                }
            }, 100);
        }
    }
}

// 为榜单切换标签添加点击事件
rankTabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
        // 移除所有标签的选中样式
        rankTabs.forEach(t => t.classList.remove('change'));
        // 为当前点击的标签添加选中样式
        tab.classList.add('change');
        
        // 根据索引确定要切换到的榜单类型
        if (index === 0) { // 积分榜
            switchRank('integral');
        } else if (index === 1) { // 月票榜
            switchRank('monthly');
        } else if (index === 2) { // 打赏榜
            switchRank('reward');
        } else if (index === 3) { // 订阅榜
            switchRank('subscription');
        } else if (index === 4) { // 销量榜
            switchRank('sales');
        } else if (index === 5) { // 星光榜
            switchRank('starlight');
        } else if (index === 6) { // 新书榜
            switchRank('newbook');
        } else if (index === 7) { // 土豪榜
            switchRank('rich');
        } else {
            switchRank('integral');
        }
    });
});

    // 全局变量管理
const searchState = {
    novelData: [], // 存储接口返回的所有小说数据
    filteredData: [], // 筛选后的数据
    debounceTimer: null, // 防抖定时器
    currentKeyword: '', // 当前搜索关键词
    isLoading: false // 加载状态标识
};

// DOM 元素缓存（基于原始 HTML 结构）
const domElements = {
    searchInput: document.getElementById('searchInput'),
    searchBtn: document.getElementById('searchBtn'),
    // 动态创建结果容器（不修改原始 HTML，追加到搜索框下方）
    resultContainer: (() => {
        const container = document.createElement('div');
        container.id = 'searchResultContainer';
        container.style.cssText = `
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 8px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            z-index: 100;
            max-height: 400px;
            overflow-y: auto;
            display: none;
        `;
        // 将结果容器插入到搜索框父元素中
        document.querySelector('.search-content').appendChild(container);
        return container;
    })()
};

// 初始化：加载小说数据并绑定事件
async function initSearch() {
    // 优先加载接口数据
    await fetchNovelData();
    // 绑定交互事件
    bindSearchEvents();
}

// 调用小说接口获取数据
async function fetchNovelData() {
    try {
        const response = await fetch('https://www.iceread.com/api/common/rank/6273/0/1291');
        if (!response.ok) throw new Error('接口请求失败');
        
        const data = await response.json();
        // 提取小说核心数据（适配接口返回格式）
        searchState.novelData = data.list ? data.list.map(item => item.story || item) : [];
        searchState.filteredData = [...searchState.novelData];
    } catch (error) {
        console.error('小说数据加载失败:', error);
        renderResult(`<div style="padding:16px;text-align:center;color:#999;">数据加载失败，请稍后重试</div>`);
    }
}

// 绑定搜索相关事件
function bindSearchEvents() {
    // 搜索按钮点击
    domElements.searchBtn.addEventListener('click', handleSearch);
    
    // 输入框实时输入（防抖处理）
    domElements.searchInput.addEventListener('input', () => {
        searchState.currentKeyword = domElements.searchInput.value.trim().toLowerCase();
        
        // 清空关键词时隐藏结果容器
        if (!searchState.currentKeyword) {
            domElements.resultContainer.style.display = 'none';
            return;
        }
        
        // 防抖：300ms 内连续输入不触发搜索
        clearTimeout(searchState.debounceTimer);
        searchState.debounceTimer = setTimeout(handleSearch, 300);
    });
    
    // 回车键触发搜索
    domElements.searchInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') handleSearch();
    });
    
    // 点击页面其他区域隐藏结果容器
    document.addEventListener('click', (e) => {
        const isClickInside = domElements.searchInput.contains(e.target) || 
                             domElements.searchBtn.contains(e.target) || 
                             domElements.resultContainer.contains(e.target);
        if (!isClickInside) {
            domElements.resultContainer.style.display = 'none';
        }
    });
}

// 核心搜索逻辑
function handleSearch() {
    const keyword = searchState.currentKeyword;
    
    // 显示加载状态
    showLoading();
    
    // 筛选逻辑：匹配小说名、作者、标签
    searchState.filteredData = searchState.novelData.filter(novel => {
        const matchName = novel.name?.toLowerCase().includes(keyword) || false;
        const matchAuthor = novel.author?.toLowerCase().includes(keyword) || false;
        const matchTag = novel.tag?.toLowerCase().includes(keyword) || false;
        return matchName || matchAuthor || matchTag;
    });
    
    // 渲染搜索结果
    renderResult();
}

// 渲染搜索结果
function renderResult(customContent = '') {
    // 隐藏加载状态
    hideLoading();
    
    // 显示结果容器
    domElements.resultContainer.style.display = 'block';
    
    // 自定义内容渲染（如错误提示）
    if (customContent) {
        domElements.resultContainer.innerHTML = customContent;
        return;
    }
    
    // 无结果处理
    if (searchState.filteredData.length === 0) {
        domElements.resultContainer.innerHTML = `
            <div style="padding:24px;text-align:center;">
                <div style="font-size:24px;color:#ccc;margin-bottom:8px;">&#128270;</div>
                <p style="color:#666;">未找到包含「${searchState.currentKeyword}」的小说</p>
                <p style="color:#999;font-size:12px;margin-top:4px;">建议尝试其他关键词</p>
            </div>
        `;
        return;
    }
    
    // 渲染小说列表
    let resultHtml = '';
    searchState.filteredData.forEach(novel => {
        // 关键词高亮处理
        const highlight = (text) => {
            if (!text || !searchState.currentKeyword) return text;
            const regex = new RegExp(`(${searchState.currentKeyword})`, 'gi');
            return text.replace(regex, '<span style="color:#6366f1;font-weight:500;">$1</span>');
        };
        
        // 小说标签处理
        const tags = novel.tag ? novel.tag.split(',').slice(0, 2) : [];
        const tagHtml = tags.map(tag => `
            <span style="font-size:12px;padding:2px 6px;background:#f3f4f6;color:#666;border-radius:4px;margin-right:4px;">${highlight(tag)}</span>
        `).join('');
        
        // 单个小说项 HTML
        resultHtml += `
            <div style="padding:12px;border-bottom:1px solid #f5f5f5;cursor:pointer;" onmouseover="this.style.background='#fafafa'" onmouseout="this.style.background='transparent'"onclick='jumps(${JSON.stringify(novel)})'>
                <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;">
                    <h4 style="margin:0;font-size:14px;color:#333;">${highlight(novel.name)}</h4>
                    ${novel.isPay === 1 ? '<span style="font-size:12px;color:#ef4444;background:#fee2e2;padding:1px 4px;border-radius:3px;">VIP</span>' : ''}
                </div>
                <p style="margin:0 0 6px 0;font-size:12px;color:#999;">作者：${highlight(novel.author)}</p>
                <div style="margin-bottom:6px;">${tagHtml}</div>
                <p style="margin:0;font-size:12px;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                    ${highlight(novel.introduce ? novel.introduce.slice(0, 100) + '...' : '暂无简介')}
                </p>
            </div>
        `;
    });
    
    domElements.resultContainer.innerHTML = resultHtml;
}

// 显示加载状态
function showLoading() {
    searchState.isLoading = true;
    domElements.resultContainer.style.display = 'block';
    domElements.resultContainer.innerHTML = `
        <div style="padding:24px;text-align:center;">
            <div style="width:20px;height:20px;border:2px solid #6366f1;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 8px;"></div>
            <p style="color:#666;font-size:12px;">正在搜索...</p>
        </div>
    `;
    // 添加加载动画样式
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);
}

// 隐藏加载状态
function hideLoading() {
    searchState.isLoading = false;
}

// 页面加载完成后初始化搜索功能
document.addEventListener('DOMContentLoaded', initSearch);

    function jumps(hearf){
       location.href=`./channelDetail.html?${JSON.stringify(hearf)}`
    }
    function jumpShouye(){
        location.href=`./index.html`
    }
    function login(){
        location.href=`./personal.html`
    }
    function jumpGirlCopyRight(){
        location.href=`./girlCopyright.html`
    }
    function jumpAuthor(){
        location.href='./personal.html?'
    }
    function jumpNvbook(){
        location.href=`./channelBook.html`
    }
    function jumpNvrank(){
        location.href=`./channelRank.html`
    }
    function jumpNv(){
        location.href=`./channel.html`
    }